import './App.css';
import store from './store/index'

import React, { Component ,PureComponent} from 'react';

class App extends Component {
  render() { //渲染组件模板到视图
    return (
      <div className='index'>
          <h1> { store.getState().count } </h1>
          <h1> { store.getState().sum } </h1>
          <h1> { store.getState().sub } </h1>
          <button onClick={ this.add }>让 count 值加一</button>
          <button onClick={ this.addTwo }>让 sum 值加一</button>
          <button onClick={ this.sub }>让 sub 值加一</button>
      </div>
    );
  }
  // 监听值的改变
  componentDidMount() {
   this.addState =  store.subscribe(()=>{
      // console.log();
      this.setState({});
      return ()=>{  }
    })
  }

  componentWillUnmount() {
    this.addState();
  }

  add = () => {
    store.dispatch( { type:'ADD' , params : 1} )
  }

  addTwo = () => {
    store.dispatch( { type:'DELETE' , params: 2 } )
  }

  sub = () => {
    store.dispatch( { type:'BIANJI' , params:1 } )
  }
}

export default App;